<template>
    <div>
        <div class="head">
            <a-button @click="handleCancle" style="margin-right: 10px"> 取消</a-button>
            <a-button type="primary" @click="onSubmit">确认</a-button>
        </div>
        <a-form class="dept-model" layout="horizontal" :model="formState" :rules="rules" ref="formRef">
            <a-form-item class="full-width" :label="t('yl.priceChName')" name="priceChName">
                <a-input v-model:value="formState.priceChName" :placeholder="t('yl.priceChName')" style="width: 363px" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.priceChType')" name="priceChType">
                <a-select v-model:value="formState.priceChType" style="width: 363px">
                    <a-select-option :value="item.value" v-for="(item, index) in priceChTypeList" :key="index">{{
                        item.label
                    }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.bdatetime')" name="bdatetime">
                <a-range-picker
                    style="width: 363px"
                    v-model:value="formState.date"
                    :show-time="{
                        hideDisabledOptions: true,
                        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                    }"
                    format="YYYY-MM-DD HH:mm:ss"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    v-if="!formState.priceChType || formState.priceChType == '0'"
                />
                <a-date-picker
                    v-if="formState.priceChType == '1'"
                    v-model:value="formState.bdatetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.priceChPlan')" name="priceChPlan">
                <a-select v-model:value="formState.priceChPlan" style="width: 363px">
                    <a-select-option :value="item.value" v-for="(item, index) in priceChPlanList" :key="index">{{
                        item.label
                    }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.selectProduct')" name="importWay">
                <a-radio-group v-model:value="formState.importWay">
                    <a-radio :value="0">商品库选商品</a-radio>
                    <a-radio :value="1">批量导入表格</a-radio>
                </a-radio-group>
                <div class="AddItem" v-if="formState.importWay == 0" @click="AddItemFun">
                    <span v-for="(item, index) in formState.details" :key="index">{{ item }}</span>
                    <span v-if="!formState.details.length">点击此处添加商品</span>
                </div>
                <a-timeline style="margin-top: 20px" v-if="formState.importWay == 1">
                    <a-timeline-item color="red">
                        <template #dot><span class="AddItem-num">1</span></template>
                        <div class="AddItem-main">
                            <span class="AddItem-main-title">下载表格模板</span>
                            <div class="AddItem-bg">
                                <span>请下载模板后，按照模板格式要求编辑后，完成上传</span>
                                <span class="AddItemdownload"> <EditOutlined /> 下载模板 </span>
                            </div>
                        </div>
                    </a-timeline-item>
                    <a-timeline-item color="red">
                        <template #dot><span class="AddItem-num">1</span></template>
                        <div class="AddItem-main">
                            <span class="AddItem-main-title">上传文件</span>
                            <div class="AddItem-bg">
                                <span>当前仅支持.xlsx文件</span>
                                <span class="AddItemdownload">
                                    <a-button> 上传</a-button>
                                </span>
                            </div>
                        </div>
                    </a-timeline-item>
                </a-timeline>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.rewire')" name="rewire" v-if="formState.details.length">
                <a-select v-model:value="formState.rewire" style="width: 363px">
                    <a-select-option :value="item.value" v-for="(item, index) in rewireList" :key="index">{{
                        item.label
                    }}</a-select-option>
                </a-select>
            </a-form-item>
            <div class="Price-setup" v-if="formState.details.length">变价设置</div>
            <div v-if="formState.details.length" class="Price-setup-num">
                <a-form-item class="full-width" :label="t('yl.marketPrice')" name="priceChPlan">
                    <a-input v-model:value.number="formState.signMarketPrice">
                        <template #addonBefore v-if="formState.priceChPlan == 0">减少 </template>
                        <template #addonAfter> {{ formState.priceChPlan == 0 ? '元' : '%' }}</template>
                    </a-input>
                </a-form-item>
                <a-form-item class="full-width" :label="t('yl.memberPrice')" name="priceChPlan">
                    <a-input v-model:value.number="formState.signMemberPrice">
                        <template #addonBefore v-if="formState.priceChPlan == 0">减少 </template>
                        <template #addonAfter> {{ formState.priceChPlan == 0 ? '元' : '%' }}</template>
                    </a-input>
                </a-form-item>
                <a-form-item class="full-width" :label="t('yl.bargainPrice')" name="priceChPlan">
                    <a-input v-model:value.number="formState.signBargainPrice">
                        <template #addonBefore v-if="formState.priceChPlan == 0">减少 </template>
                        <template #addonAfter> {{ formState.priceChPlan == 0 ? '元' : '%' }}</template>
                    </a-input>
                </a-form-item>
                <a-form-item class="full-width" :label="t('yl.commonPrice')" name="priceChPlan">
                    <a-input v-model:value.number="formState.signCommonPrice">
                        <template #addonBefore v-if="formState.priceChPlan == 0">减少 </template>
                        <template #addonAfter> {{ formState.priceChPlan == 0 ? '元' : '%' }}</template>
                    </a-input>
                </a-form-item>
            </div>
        </a-form>

        <goods-model
            v-if="showGoodsModel"
            :visible="showGoodsModel"
            @onSubmit="goodsModelSubmit"
            @cancle="goodsModelCancle"
            :details="formState.details"
        ></goods-model>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import { Label } from '@icon-park/vue-next';
import moment, { Moment } from 'moment';
import goodsModel from './goodsModel.vue';
interface DeptState {
    priceChName: string | number;
    priceChType: string | number;
    priceChPlan: string | number;
    bdatetime: string | number;
    // edatetime: string | number;
    date: string | number[];
    importWay: string | number;
    rewire: string | number;
    details: any[];
    signBargainPrice: string | number;
    signCommonPrice: string | number;
    signMarketPrice: string | number;
    signMemberPrice: string | number;
    priceChId: string | number;
}

// 表单校验规则
const initRules = (t: fn) => {
    return {
        specsName: [{ required: true, message: t('yl.specsName'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {
        goodsModel,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },

        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const showGoodsModel = ref(false);
        const showModal = computed(() => props.visible);
        const formState: DeptState = reactive({
            priceChName: '', // 设备编号
            priceChType: '',
            priceChPlan: '',
            date: [],
            bdatetime: '',
            importWay: '',
            rewire: '',
            details: [],
            signBargainPrice: '',
            signCommonPrice: '',
            signMarketPrice: '',
            signMemberPrice: '',
            priceChId: '',
        });

        const priceChTypeList = [
            { value: 0, label: '限时变价' },
            { value: 1, label: '定时变价' },
            // { value: 2, label: '总部控价' },
            // { value: 3, label: '切页变价' },
        ];
        const rewireList = [
            { value: 1, label: '1小时' },
            { value: 2, label: '2小时' },
            { value: 3, label: '3小时' },
            { value: 4, label: '4小时' },
        ];
        const priceChPlanList = [
            { value: 0, label: '批量立减' },
            { value: 1, label: '批量打折' },
        ];
        console.log(props.dept);

        if (JSON.stringify(props.dept) !== '{}') {
            const {
                priceChName, // 设备编号
                priceChType,
                priceChPlan,
                bDatetime,
                importWay,
                rewire,
                details,
                signBargainPrice,
                signCommonPrice,
                signMarketPrice,
                signMemberPrice,
                eDatetime,
                priceChId,
            } = props.dept as NormalObj;
            formState.priceChName = priceChName;
            formState.priceChType = priceChType;
            formState.priceChPlan = priceChPlan;
            formState.importWay = importWay;
            formState.rewire = rewire;
            formState.signBargainPrice = signBargainPrice;
            formState.signCommonPrice = signCommonPrice;
            formState.signMarketPrice = signMarketPrice;
            formState.signMemberPrice = signMemberPrice;
            formState.priceChId = priceChId;
            const date = [];
            if (eDatetime) {
                date.push(bDatetime);
                date.push(eDatetime);
                console.log(date);
                formState.date = date;
            } else {
                formState.bdatetime = bDatetime;
            }
            if (details && details.length) {
                formState.details = details.map((item: any) => {
                    return item.skuCode;
                });
            }

            console.log(formState);
        }
        // 编辑时赋值

        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        const onSubmit = () => {
            console.log(formState);
            formRef.value.validate().then(() => {
                emit('submit', formState);
            });
        };
        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        // 添加商品
        const AddItemFun = () => {
            showGoodsModel.value = true;
        };
        // 添加商品
        const goodsModelSubmit = (skuCodeList: any) => {
            console.log(skuCodeList);
            formState.details = skuCodeList;

            showGoodsModel.value = false;
        };
        const goodsModelCancle = () => {
            showGoodsModel.value = false;
        };

        return {
            formRef,
            showModal,
            formState,
            t,
            rules,
            onSubmit,
            handleCancle,
            priceChTypeList,
            moment,
            priceChPlanList,
            showGoodsModel,
            AddItemFun,
            goodsModelSubmit,
            goodsModelCancle,
            rewireList,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .AddItem {
        border: 1px solid #cccc;
        border-radius: 20px;
        width: 685px;
        height: 190px;
    }
    .AddItem-num {
        display: block;
        width: 24px;
        height: 24px;
        border: 1px solid #ff8e43;
        border-radius: 100%;
        line-height: 24px;
    }
    .AddItem-main-title {
        font-size: 14px;
        padding: 0px 20px 10px 20px;
        display: block;
    }
    .AddItem-bg {
        width: 508px;
        height: 61px;
        background: #eeeeee;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .AddItemdownload {
            color: #ff8e43;
        }
    }
    .Price-setup {
        font-size: 16px;
        color: #333;
    }
    .Price-setup-num {
        display: flex;
    }
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
